<template>
	<view class="u-flex item  u-col-top" :class="vertical?'u-flex-col':''" >
		<view class="u-flex" style="height: 200rpx;padding-left: 10rpx;">
			<u-image :width="size" :height="size" :src="item.image" ></u-image>
		</view>
		<view class=" p-l-20 card u-flex u-row-between" style="width: 450rpx;" >
			<view :style="{height:size}">
				<view class="name u-line-1">
					{{item.storeName}}
				</view>
				<view class="u-flex u-row-left">
					<view  v-if="Object.keys(item.suk).length>0">
				
						<view>								
						<text class="tag" v-for="(tag,index1) in Object.values(item.suk)"
							:key="index1">{{tag}}</text>
						</view>	
					</view>
					<view v-else>
						<view>
						<text class="tag">默认</text>
						</view>
					</view>
				</view>
				<view>
					<priceStyle :info="item" />
				</view>
				
				
			</view>
			<u-number-box style="margin-left: 10rpx;" :async-change="false" :min="1" v-model="item.num"  :disabled-input="true" @change="change"></u-number-box>
		</view>
	</view>
</template>

<script>
	import priceStyle from '@/components/priceStyle.vue'
	export default {
		components:{
			priceStyle
		},
		name: 'indexListItem',
		computed: {
			size() {
				return this.imageSize + 'rpx'
			}
		},
		model:{
			prop:"value",
			event:"changeValue"
		},
		props: {
            
			valChange:{
				type:Function,
				default:()=>{}
			},
		

			item: {
				type: Object,
				default: () => {
					return {}
				}
			},
			index: {
				type: Number,
				default: 0
			},
			showSold: {
				type: Boolean,
				default: true
			},
			vertical: {
				type: Boolean,
				default: false
			},
			imageSize: {
				type: [Number, String],
				default: '200'
			}
		},

		mounted() {
		
		},
		data() {
			return {
				value: 0
			};
		},
		methods: {

			addCart(id) {
				this.value = 1
			},
			change(value){
			//	this.value = value
				
				this.item.num=value.value
				this.valChange(this.index,this.item)
				
			}

		},
	}
</script>

<style lang="scss" scoped>
	.card {

		height: 200rpx;
	}

	.footer {
	}

	.price {
		color: #DD524D;
		font-weight: 600;
		margin-right: 10rpx;
	}

	.cart {
		padding: 10rpx 20rpx 10rpx 20rpx;
		background-color: $base-color;
		border-radius: 60rpx;
		line-height: 40rpx;

	}

	.item {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		width: 100%;
		

		.name {
			font-weight: 600;
			font-size: 30rpx;
			width: 100%;
		}

		.label,
		.delivery {
			color: #ce5f4d;
			font-size: 24rpx;
			border: 1rpx solid #ce5f4d;
			padding: 0 5rpx;
			border-radius: 4rpx;
			transform: scale(0.8);
		}

		.delivery {
			color: #d9b89d;
			border: 1rpx solid #d9b89d;
		}

		.sold {
			color: #a3a6a3;
			font-size: 24rpx;
		}
	}
	.tag {
		color: #b9b9b9;
		font-size: 26rpx;
		margin-right: 10rpx;
	
	}
	
</style>
